let app = new Vue({
  el: '#app',
  data: {
    loadingInfo: '加载中...',

    username: '',
    
    currentRoomInfo: {},
    isReady: false,
    roomStatus: true,

    linkStatus: false,

    msgStatus: false,
    messageList: [],
    messageShowTimeout: null,
    sendMessageType: 'global',
    sendMessageVal: '',

    scrollTopStatus: true,

    roomList: [],
    roomKey: '',

    io: {}
  },
  watch: {
    messageList() {
      if (!this.scrollTopStatus) return;
      this.$nextTick(() => {
        $('.messageBox .overhidden').scrollTop($('.messageBox ul').height())
      })
      if (this.messageList.length >= 100) {
        this.messageList.splice(0, 50);
      }

      $('.messageBox').css('opacity', 1);
      clearTimeout(this.messageShowTimeout);
      this.messageShowTimeout = setTimeout(() => {
        $('.messageBox').css('opacity', .2);
      }, 3000);
    }
  },
  methods: {
    link() {
      view.loading('连接服务器中...', success => {
        this.io = io('http://192.168.42.107:3001');

        // 监听是否连接上服务器
        this.on('connect', () => {
          this.bindEvent();
          this.sendUsername();
          this.parsing();
          success();
        })
      })
    },
    sendMessage() {
      this.action('message', {
        msg: this.sendMessageVal,
        type: this.sendMessageType
      });
      this.sendMessageVal = '';
    },
    sendUsername(flag) {
      if (!flag) {
        this.username = '';
        view.play('inputName');
      } else {
        // while ($.trim(this.username) == "" || this.username.length >= 5) {
        //   this.username = prompt('输入你的名称, 不能为空，最大5位字符');
        // }
        this.action('player.add', {
          username: this.username
        });
        this.linkStatus = true;
        view.play('home');
      }
    },
    parsing() {
      this.on('all', parseAction);
    },
    on(name, fn) {
      if (!this.io) {
        console.error('not connect socket server.');
        return;
      }
      this.io.on(name, fn);
    },
    emit(name, data) {
      if (!this.io) {
        console.error('not connect socket server.');
        return;
      }
      this.io.emit(name, data);
    },
    action(name, data, success) {
      this.emit('all', {
        data,
        action: name,
        time: new Date().getTime()
      });
      actionCallFn[name] = success;
      actionCallFn[name + '.error'] = success;
    },
    jump(name) {
      view.play(name);
    },
    bindEvent() {
      this.$nextTick(() => {
        $('.messageBox .overhidden').on('mouseover', () => {
          this.scrollTopStatus = false;
        })
        $('.messageBox .overhidden').on('mouseout', () => {
          this.scrollTopStatus = true;
        })
      })
    },
    parseDate(str) {
      return new Date(str).toLocaleTimeString();
    },
    addRoom(key) {
      view.loading('加入中...', success => {
        this.action('room.add', {
          key: key || this.roomKey
        }, success)
      }, 'create')
    },
    leaveRoom(){
      view.loading('退出中...', success => {
        this.action('room.leave', null, success);
      }, 'home')
    },
    shitRoom(id){
      this.action('room.shit', {
        id
      });
    },
    createRoom() {
      view.loading('创建中...', success => {
        app.action('room.create', {
          status: this.roomStatus
        }, success);
      }, 'create');
    },
    selectReady() {
      this.isReady = !this.isReady;
      app.action('room.ready', {
        ready: this.isReady
      });
    },

    startGame(){
      // view.loading('游戏创建中...', success => {
      app.action('game.create', null)
      // }, 'game');
    }
  },
  mounted() {
    // document.body.onselectstart = () => {
    //   return false
    // };
  },
})